/**
 * @fileoverview   dom/css  设置或获取元素的样式

 * @date: 11-11-4
 * @time: 上午10:33
 * @author 2kid
 * @version 0.001
 */
/**
 *
 * 方法：
 * dom.prototype.css
 *
 */
F.reg('dom/css', function (f, dom) {
    var win = window, doc = win['document'], docElement = doc.documentElement;
    var TOLINE = 1, TOCASE = 2;
    var BORDER = {
        thin:['1px', '2px'],
        medium:['3px', '4px'],
        thick:['5px', '6px']
    };

    function swh(str, mode) {
        switch (mode) {
            case TOLINE:
            {
                str = str.replace(/([A-Z])/g, function (s) {
                    s = '-' + s.toLowerCase();
                    return s;
                });
                break;
            }
            case TOCASE:
            {
                str = str.replace(/-\w/g, function (s) {
                    s = s.substring(1).toUpperCase();
                    return s;
                });
                break;
            }
        }
        return str;
    }

    function convertPixelValue(el, value) {
        var style = el.style,
            left = style.left,
            rsLeft = el.runtimeStyle.left,
            px;
        el.runtimeStyle.left = el.currentStyle.left;
        style.left = value || 0;
        px = style.pixelLeft;
        style.left = left;//还原数据
        el.runtimeStyle.left = rsLeft;//还原数据
        return px + "px"
    }

    function rgbTOhsl(rgb) {
        if (rgb.indexOf('#') > -1 || rgb.indexOf('transparent') > -1) return rgb;
        var s = '#', colorArr = rgb.match(/\d+/g),
            r = colorArr[0], g = colorArr[1], b = colorArr[2];
        s += parseInt(r, 10) < 16 ? '0' + parseInt(r, 10).toString(16) : parseInt(r, 10).toString(16);
        s += parseInt(g, 10) < 16 ? '0' + parseInt(g, 10).toString(16) : parseInt(g, 10).toString(16);
        s += parseInt(b, 10) < 16 ? '0' + parseInt(b, 10).toString(16) : parseInt(b, 10).toString(16);
        return s;
    }

    function converborder(key, val, ele) {
        var s = key.replace('Width', 'Style');
        //borderstyle：none
        if (val === 'medium' && get(ele, s) === 'none') {
            return '0px';
        }
        return !!win.XDomainRequest ? BORDER[val][0] : BORDER[val][1];
    }

    function set(ele, key, value) {
        if(key==='scrollLeft'||key==='scrollTop'){
            if(ele.nodeType===dom.NodeType.DOCUMENT_NODE){
                document.documentElement[key] = value;
                document.body[key] = value;
            }else{
                ele[key]=value;
            }

            return;
        }
        if (!win.getComputedStyle) {
            if (key === 'opacity') {
                //filter: alpha(opacity = 50);
                key = 'filter';
                value = 'alpha(opacity = ' + value * 100 + ') ';
                ele.style.zoom = 1;
            }
            if (key === 'float') {
                key = 'styleFloat';
            }
        }
        if (f.type(value, 'number') && key !== 'opacity') {
            value += 'px';
        }
        ele.style[key] = value;
    }


    function get(ele, key) {
        var v = '',oRect;
        if(key==='scrollLeft'||key==='scrollTop'){
            if(ele.nodeType===dom.NodeType.DOCUMENT_NODE){
                return document.documentElement[key] + document.body[key];
             }else{
                return ele[key];
            }

            return;
        }

        oRect = ele.getBoundingClientRect();

        if (key === 'width') {

            v = oRect.right - oRect.left -
                parseFloat(get(ele, 'padding-left')) - parseFloat(get(ele, 'border-left-width')) -
                parseFloat(get(ele, 'padding-right')) - parseFloat(get(ele, 'border-right-width')) + 'px';
            return v;
        } else if (key === 'height') {
            v = oRect.bottom - oRect.top -
                parseFloat(get(ele, 'padding-top')) - parseFloat(get(ele, 'border-top-width')) -
                parseFloat(get(ele, 'padding-bottom')) - parseFloat(get(ele, 'border-bottom-width')) + 'px';
            return v;
        }

        if ('getComputedStyle' in win) {
            key = swh(key, TOLINE);
            v = win.getComputedStyle(ele, null).getPropertyValue(key);
        } else {

            if (key === 'float') {
                key = 'styleFloat';
            }
            if (key === 'opacity') {
                key = 'filter';
            }
            key = swh(key, TOCASE);
            //获取计算后的样式
            v = ele.currentStyle[key];
            if (key === 'backgroundPosition') {
                v = ele.currentStyle['backgroundPositionX'] + ' ' + ele.currentStyle['backgroundPositionY'];
            }
            //转换单位为px
            if (/\d+(em|pt|mm|cm|pc|in|ex|rem|vw|vh|vm|ch|gr)$/.test(v)) {
                v = key === 'fontSize' ? '1em' : v;
                v = convertPixelValue(ele, v);

            }
            //转换border的thin medium thick
            if (v in BORDER && /^(border).+(Width)$/.test(key)) {
                v = converborder(key, v, ele);

            }
            if (key === 'filter') {
                v = v ? v.match(/\d+/) / 100 : 1;
            }
        }
        if (v === 'auto' && key !== 'overflow') {
            v = 0 + 'px';
        }
        if (key.toLowerCase().indexOf('color') > -1) {
            v = rgbTOhsl(v);
        }
        return v;
    }

    f.extend(dom, {
        /**
         * @name F.Dom.prototype.css
         * @function
         * @namespace 设置或获取css样式
         * @param {String | Object} name  String如果第二个参数设置了，则设置样式，
         *                  否则获取第一个元素样式,  |
         *                                 Object设置多个样式，
         * @param {String} value 可选 第二个参数必须为字符串，对于宽度等这样的样式，请加单位，如 '200px'
         * @return {Object | string}
         * @example
         * 例子：
         * 1.
         * //设置所有的a元素的 color 为 #ccc
         * dom.query('a').css('color','#ccc');
         * 2.
         * //获取第一个a元素的href
         * dom.query('a').css('color');
         * 3.
         * //设置所有的a元素的 多个样式
         * dom.query('div').css({color:'#ccc',padding:'5px'});
         */
        css:function (name, value) {
            var elem = this.get();
            if (f.type(name, 'string')) {
                if (f.type(value, 'string')) {
                    f.each(elem, function (ele) {
                        set(ele, name, value);
                    }, this);

                } else {
                    if (elem.length > 0) {
                        return get(elem[0], name);
                    }
                }

            } else if (f.type(name, 'object')) {
                f.each(elem, function (ele) {
                    f.each(name, function (v, k) {
                        set(ele, k, v);
                    }, this);
                }, this);
            }
            return this;
        }

    });


    return dom;
}, {

});